<template>
  <div id="openProve">
    <div class="header">
      <div class="tab" :class="tab == 1 ? 'tab-active' : ''">开具证明</div>
      <div class="tab" :class="tab == 2 ? 'tab-active' : ''">导出打印</div>
      <div class="back" @click="$router.back()">返回</div>
    </div>
    <div class="section">
      <div class="box" v-show="tab === 1">
        <div class="item">
          <div class="label">选择员工</div>
          <select-range :enterType="1" :isLow="true" :isNewLow="true" :authType="1" :selectedList.sync="selectedList"></select-range>
        </div>
        <div class="item">
          <div class="label">选择模板</div>
          <el-select @change="onChange" v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.key" :label="item.value" :value="item.key"></el-option>
          </el-select>
        </div>
        <div v-html="templateContent" class="card"></div>
      </div>
      <div class="box2 box" v-show="tab === 2">
        <div class="card card1" v-html="handleContent"></div>
        <div class="card card2">
          <div class="item11" @click="id = item.id" :class="item.id === id ? 'item11-active' : ''" v-for="(item, index) in selectedList" :key="index">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button @click="oper(1)" type="primary" v-if="tab === 1">确认开具并预览</el-button>
      <el-button @click="oper(2)" type="" v-if="tab === 2">上一步</el-button>
      <el-button @click="oper(3)" type="primary" v-if="tab === 2">导出</el-button>
      <el-button @click="oper(4)" type="primary" v-if="tab === 2">打印</el-button>
    </div>
  </div>
</template>

<script>
import SelectRange from "../../documentList/SelectRange.vue";
export default {
  name: "openProve",
  components: { SelectRange },
  data() {
    return {
      tab: 1,
      options: [],
      value: "",
      selectedList: [],
      templateContent: "",
      mapObj: {},
      batch: "",
      id: "",
    };
  },
  computed: {
    handleContent() {
      return this.mapObj[this.id];
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    async oper(type) {
      //1确认开具 2上一步  3导出  4打印
      if (type === 1) {
        var userIds = this.selectedList.map((m) => m.id);
        if (userIds && userIds.length > 0) {
          var proveData = await this.templateReplace(userIds, this.templateContent);
          console.log(proveData, "proveData");
          const { data } = await this.$api.optionsManage.AddProve(proveData);
          this.batch = data.data;
          this.tab = 2;
          this.id = this.selectedList[0]?.id;
        } else {
          this.$message.warning("未选择员工");
        }
        return;
      } else if (type == 2) {
        this.tab = 1;
      } else if (type == 3) {
        const downloadFile = ({ stream, fileName, mime }) => {
          let bstr = window.atob(stream);
          let n = bstr.length;
          let u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          const blob = new File([u8arr], fileName, {
            type: mime,
          });
          const blobUrl = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = blobUrl;
          a.download = fileName;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(blobUrl);
        };
        const { data } = await this.$api.optionsManage.Export({ batch: this.batch });
        downloadFile(data.data);
      } else if (type == 4) {
        const downloadFile = ({ stream, fileName, mime }) => {
          let bstr = window.atob(stream);
          let n = bstr.length;
          let u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          const blob = new File([u8arr], fileName, {
            type: mime,
          });
          const blobUrl = URL.createObjectURL(blob);
          // const a = document.createElement('a');
          // a.href = blobUrl;
          // a.download = fileName;
          // document.body.appendChild(a);
          // a.click();
          // document.body.removeChild(a);
          // URL.revokeObjectURL(blobUrl);
          window.open(blobUrl);
        };
        const { data } = await this.$api.optionsManage.Export({ batch: this.batch });
        downloadFile(data.data);
      }
    },
    async templateReplace(employeeId, templateContent = "") {
      // const { data: { data: infoList } } = await this.$api.optionsManage.GetAllEnableModuleField(); //获取所有的信息引用
      // const infoAll = infoList.reduce((p, c) => p.concat(c.columns), []);
      // let DicMap = {};
      // const { data: { data: valueList } } = await this.$api.optionsManage.GetContractFieldList({ employeeId: employeeId }); //获取员工字段值列表
      // const valueAll = valueList.reduce((p, c) => p.concat(c.fields), []);
      // infoAll.map(i => {
      //   DicMap[i.columnname] = valueAll.find(c => c.fieldId === i.columnid) || {};
      // });
      let templateArr = [];
      await this.$api.optionsManage.GetEmployeesColumnsInfo(employeeId).then((res) => {
        res.data.data.forEach((item) => {
          let tempContent = templateContent;
          item.columValues.forEach((m) => {
            tempContent = tempContent.replace(`#${m.key}#`, `<span style="color:#333;text-decoration:underline;">${m.value || ""}</span>`);
          });
          this.mapObj[item.employeeId] = tempContent;
          templateArr.push({
            employeeId: item.employeeId,
            templateId: this.value,
            proveContent: tempContent,
          });
        });
      });
      return templateArr;
      // for (const [name, obj] of Object.entries(DicMap)) {
      //   templateContent = templateContent.replace(`#${name}#`, `<span style="color:#333;text-decoration:underline;">${obj.fieldValue || ''}</span>`);
      // }
      // this.mapObj[employeeId] = templateContent;
      // if (Object.keys(this.mapObj).length === this.selectedList.length) {
      //   //callBack();
      // }
    },

    async onChange(templateId) {
      const { data } = await this.$api.optionsManage.GetEmployeeLeaveTemplate({ templateId });
      this.templateContent = data.data.templateContent;
    },
    async initData() {
      const { data } = await this.$api.optionsManage.GetSelect();
      this.options = data.data;
    },
  },
  activated() {
    this.initData();
  },
};
</script>

<style lang="less" scoped>
#openProve {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 16px;
    box-shadow: 0 2px 12px #cccccc;
    .tab {
      padding: 15px 0;
      margin: 0 40px;
      cursor: pointer;
      &-active {
        color: #2e9de7;
        border-bottom: 2px solid #2e9de7;
        // padding-bottom: 9px;
        // padding-top: 9px;
      }
    }
    .back {
      position: absolute;
      top: 50%;
      left: 30px;
      transform: translateY(-50%);
      color: #2e9de7;
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .section {
    flex: 1;
    overflow: hidden;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    .box {
      flex: 1;
      width: 1200px;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
      overflow: auto;
      padding: 10px 10px;
      .item {
        margin-bottom: 20px;
        display: flex;
        .el-select {
          width: 300px;
        }
      }
      .card {
        flex: 1;
        overflow: auto;
        // padding: 20px;
        box-shadow: 0 2px 12px #cccccc;
        .item11 {
          // padding: 15px;
          // padding-bottom: 0;
          padding-left: 15px;
          margin-top: 15px;
          cursor: pointer;
        }
      }
    }
    .box2 {
      display: flex;
      flex-direction: row;
      .card {
        box-shadow: 0 2px 12px #cccccc;
        height: 100%;
      }
      .card1 {
        flex: 3;
        margin-right: 20px;
      }
      .card2 {
        flex: 1;
        .item11-active {
          color: #31a2f2;
        }
      }
    }
  }
  .footer {
    box-shadow: 0 2px 12px #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }
}
</style>
